import './css/index.css';
let navList = document.querySelector('.nav-list');
let navLi = navList.querySelectorAll('li');
let container = document.querySelector('.container');
let listUl = container.querySelectorAll('ul');
let num = 0;

navLi.forEach((el, index) => {
  el.addEventListener('mouseenter', () => {
    el.children[0].classList.add('active-nav');
    listUl[index].classList.add('active-list');
    container.classList.add('active-showList');
    num = index;
  });
  el.addEventListener('mouseleave', () => {
    el.children[0].classList.remove('active-nav');
    listUl[index].classList.remove('active-list');
    container.classList.remove('active-showList');
  });
});

container.addEventListener('mouseenter', () => {
  container.classList.add('active-showList');
  listUl.forEach((el, index, arr) => {
    arr[num].classList.add('active-list');
  });
});
container.addEventListener('mouseleave', () => {
  num = 0;
  container.classList.remove('active-showList');
  listUl.forEach((el) => {
    el.classList.remove('active-list');
  });
});
